<template>
        <div v-if="propValue.radio == 1">
            <div class="content1"  v-for="(item,i) in propValue.imgList" :key="i" :style="{'border-radius':propValue.borderRadius+'rem'}">
                <div><img :style="{'width':propValue.imgwidth+'rem', 'height': propValue.imgheight+'rem'}" :src="item.img" alt="" ></div>
                <div  class="title" :style="{'font-size' : propValue.textsize+'rem'}">{{item.title}}</div>
            </div>
        </div>

        <div v-else-if="propValue.radio == 2">
            <div class="content2"  v-for="(item,i) in propValue.imgList" :key="i" :style="{'border-radius':propValue.borderRadius+'rem'}">
                <div><img :src="item.img" alt="" ></div>
                <div  class="title2" >{{item.title}}</div>
                <div class="content22">{{item.content}}</div>
            </div>
        </div>
</template>

<script>
export default {
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
        }
    },
}
</script>

<style lang="scss" scoped>
    .content1 {
        // width: 219rem;
        // height: 262rem;
        background: #fff;
        box-shadow: 0px 8px 64px 1px rgba(0,0,0,0.1490);
        transition: .4s;
        height: 100%;
        opacity: 1;
        div {
            text-align: center;
            img {
            margin-top: 47rem;
            vertical-align: middle;
            // width: 80rem;
            // height: 80rem;
        }
        }

        .title {
            margin-top: 40rem;
            text-align: center;
            // font-size: 20px;
            font-weight: bold;
            color: #222222;
        }
    }
    .content1:hover {
        transform: scale(1.2);
    }

    .content2 {
        width: 277rem;
        height: 312rem;
        background: #fff;
        box-shadow: 0px 8px 64px 1px rgba(0,0,0,0.0784);
        opacity: 1;
        div {
            // text-align: center;
            // margin-top: -32rem;
            img {
            margin-top: -32rem;
            margin-left: 33rem;
            width: 107rem;
            height: 107rem;
        }
        }
        .title2 {
            margin-top: 48rem;
            margin-left: 33rem;
            // text-align: center;
            font-size: 24px;
            font-weight: 400;
            color: #333333;
        }
        .content22 {
            margin-top: 24rem;
            margin-left: 33rem;
            margin-right: 33rem;
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #19224C;
        }
    }
</style>
